<template>
  <div class="sidebar">
    <!-- 顶部Logo区域 -->
    <div class="logo">
      <img :src="require('@/assets/images/logo.jpg')" alt="派派屋logo">
      <div class="logo-text">派派屋</div>
    </div>

    <!-- 导航菜单 -->
    <div class="nav-menu">
      <router-link to="/paipaiwu/home" class="nav-item" active-class="active">
        <i class="fas fa-home"></i>
        <span>首页</span>
      </router-link>
      <router-link to="/paipaiwu/room" class="nav-item" active-class="active">
        <i class="fas fa-door-open"></i>
        <span>房间管理</span>
      </router-link>
      <router-link to="/paipaiwu/reservation" class="nav-item" active-class="active">
        <i class="fas fa-calendar-check"></i>
        <span>预约管理</span>
      </router-link>
      <router-link to="/paipaiwu/meal" class="nav-item" active-class="active">
        <i class="fas fa-utensils"></i>
        <span>套餐管理</span>
      </router-link>
      <router-link to="/paipaiwu/shop" class="nav-item" active-class="active">
        <i class="fas fa-shopping-bag"></i>
        <span>商品管理</span>
      </router-link>
      <router-link to="/paipaiwu/activity" class="nav-item" active-class="active">
        <i class="fas fa-ticket-alt"></i>
        <span>活动管理</span>
      </router-link>
      <router-link to="/paipaiwu/type" class="nav-item" active-class="active">
        <i class="fas fa-tags"></i>
        <span>类型管理</span>
      </router-link>
      <router-link to="/paipaiwu/shopType" class="nav-item" active-class="active">
        <i class="fas fa-tags"></i>
        <span>商品类型管理</span>
      </router-link>
      <router-link to="/paipaiwu/card" class="nav-item" active-class="active">
        <i class="fas fa-credit-card"></i>
        <span>会员卡管理</span>
      </router-link>
      <router-link to="/paipaiwu/comment" class="nav-item" active-class="active">
        <i class="fas fa-comment-alt"></i>
        <span>评论管理</span>
      </router-link>
      <router-link to="/paipaiwu/user" class="nav-item" active-class="active">
        <i class="fas fa-user-cog"></i>
        <span>用户管理</span>
      </router-link>
      <router-link to="/paipaiwu/orders" class="nav-item" active-class="active">
        <i class="fas fa-receipt"></i>
        <span>订单管理</span>
      </router-link>
    </div>

    <!-- 底部用户面板（完全恢复原样） -->
    <div class="user-panel">
      <el-dropdown trigger="click" placement="top-start">
        <div class="user-info">
          <img :src="avatar" class="user-avatar">
          <div class="user-details">
            <div class="user-name">{{ name }}</div>
            <div class="user-role">{{ role }}</div>
          </div>
          <i class="el-icon-arrow-down arrow-icon"></i>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/user/profile">
            <el-dropdown-item>
              <i class="el-icon-user"></i> 个人信息
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <i class="el-icon-switch-button"></i> 退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { logout } from '@/api/login'
export default {
  name: "CustomNavbar",
  data() {
    return {
      avatar: this.$store.getters.avatar || require('@/assets/images/profile.jpg'),
      name: this.$store.getters.nickName || '未登录',
      role: this.$store.getters.roles && this.$store.getters.roles.length > 0
        ? this.$store.getters.roles[0]
        : '未知角色'
    };
  },
  methods: {
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index'
        })
      }).catch(() => {})
    }
  }
};
</script>

<style lang="scss" scoped>
/* 样式部分完全保持原样不变 */
.sidebar {
  width: 260px;
  height: 100vh;
  background-color: var(--bg-300);
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0,0,0,0.05);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}

.logo {
  padding: 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--bg-200);
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
  }
  .logo-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-200);
  }
}

.nav-menu {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
  .nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    margin: 4px 10px;
    border-radius: 6px;
    color: var(--text-100);
    text-decoration: none;
    transition: all 0.3s;
    i {
      width: 24px;
      text-align: center;
      margin-right: 12px;
      color: var(--primary-100);
    }
    span {
      font-size: 14px;
    }
    &:hover {
      background-color: var(--bg-200);
    }
    &.active {
      background: linear-gradient(90deg, rgba(139, 95, 191, 0.1), transparent);
      border-left: 3px solid var(--primary-100);
      color: var(--primary-200);
      i {
        color: var(--primary-200);
      }
    }
  }
}

.user-panel {
  padding: 15px;
  border-top: 1px solid var(--bg-200);
  .user-info {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background-color: var(--bg-200);
    }
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
      border: 2px solid var(--primary-100);
    }
    .user-details {
      flex: 1;
      .user-name {
        font-weight: 500;
        color: var(--text-100);
      }
      .user-role {
        font-size: 12px;
        color: var(--text-200);
      }
    }
    .arrow-icon {
      color: var(--text-200);
      font-size: 12px;
    }
  }
}

.user-dropdown {
  i {
    margin-right: 8px;
    width: 14px;
    text-align: center;
  }
}
</style>
